<!--
 * @Author: ningjz
 * @Date: 2022-04-11 18:05:47
 * @Description:
-->
<template>
  <com-box :title="lineState.title">
    <template #titleLeft>
      <div class="header-left header-box">{{ lineState.unit }}</div>
    </template>
    <template #titleRight>
      <slot name="titleRight" />
    </template>
    <template v-slot>
      <div class="box">
        <!-- <div class="box-msg">该功能在未开放,敬请期待...</div> -->
        <div class="box-line">
          <charts class="line-chart" :params="lineState.params"></charts>
        </div>
      </div>
    </template>
  </com-box>
</template>
<script lang="ts">
import { defineComponent, reactive, watch } from 'vue'
import httpRequest from '@/service'
import comBox from '@/components/comBox/comBox.vue'
interface IState {
  title?: string
  isGroup: boolean
  unit: any
  itemColor?: any
  params: any
  getData: (goodsId: string) => void
}
interface IObjString {
  [key: string]: boolean
}
export default defineComponent({
  name: 'centerLower',
  components: {
    comBox
    // loading
  },
  props: {
    goodsId: {
      type: String,
      default: ''
    },
    goodsName: {
      type: String,
      default: ''
    },
    classId: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    //折线图
    const lineState: IState = reactive({
      isGroup: false,
      title: '-',
      unit: '',
      params: {
        loading: true,
        forceRedraw: true, // 强制重绘
        map: {},
        options: {
          dataset: {
            dimensions: [],
            source: []
          },
          legend: {
            right: 0,
            top: 5,
            width: '100%',
            align: 'left',
            selected: {}
          },
          // 待完善：此处如果注释会导致添加不上axisLabel->fontSize的chartFontSize，因为递归合并时直接赋值xAxis全局配置了
          xAxis: [
            {
              axisLabel: {
                fontSize: '14px',
                hideOverlap: true
              }
            }
          ],
          yAxis: [
            {
              name: ['', ''],
              position: ['left', ''],
              splitLine: {
                show: false
              }
            }
          ],
          grid: {
            top: 55,
            bottom: 55,
            left: 15,
            right: 15
          },
          dataZoom: [
            {
              show: true,
              type: 'slider',
              start: 0,
              end: 100,
              width: '90%',
              left: '5%',
              bottom: 28,
              height: 15,
              borderColor: '#166beb',
              handleStyle: {
                color: '#166beb',
                borderColor: '#166beb',
                borderWidth: 4
              },
              moveHandleSize: 10,
              moveHandleStyle: {
                color: '#166beb'
              },
              textStyle: {
                color: '#00c6ff'
              },
              emphasis: {
                handleStyle: {
                  color: '#00c6ff',
                  borderColor: '#00c6ff',
                  borderWidth: 4
                },
                moveHandleStyle: {
                  color: '#00c6ff'
                }
              }
            }
          ],
          series: [
            {
              type: [],
              label: {
                show: false
              },
              connectNulls: true,
              symbolSize: 7, //折线点的大小
              itemStyle: {
                color: [
                  '#5dec9d',
                  '#ea68a2',
                  '#1da7ff',
                  '#ec6941',
                  '#ffba0a',
                  '#d7864a',
                  '#f0ff00',
                  '#432ada',
                  '#0867d6',
                  '#bd64f6',
                  '#0df1ff',
                  '#86bcff',
                  '#93FF00'
                ]
              },
              smooth: true,
              areaStyle: {
                opacity: 0
              }
            }
          ]
        }
      },
      getData: (goodsId) => {
        lineState.params.loading = true
        httpRequest
          .get({
            url: 'M2P2DgspLine',
            params: { goodsId, classId: props.classId }
          })
          .then((res) => {
            let arr = Object.keys(res.map).sort((a: any, b: any) => {
              let bData: any = ''
              let aData: any = ''
              isNaN(b.slice(-2)) ? (bData = b.slice(-1)) : (bData = b.slice(-2))
              isNaN(a.slice(-2)) ? (aData = a.slice(-1)) : (aData = a.slice(-2))
              return aData - bData
            })
            let newObj: any = {}
            arr.forEach((item) => {
              newObj[item] = res.map[item]
            })
            const dataVal = Object.values(newObj)
            if (res.code === 200 && dataVal.length > 0) {
              lineState.title = res.title
              lineState.params.options.series[0].type = Array(
                dataVal.length
              ).fill('line')
              const arrToObj: IObjString = {}
              dataVal.forEach((item: any) => {
                if (item === props.goodsName) {
                  arrToObj[item] = true
                } else {
                  arrToObj[item] = false
                }
              })
              lineState.params.options.legend.selected = arrToObj
              lineState.params.options.dataset.dimensions = [
                'name',
                ...Object.keys(newObj)
              ]
              lineState.params.map = newObj
              lineState.params.options.yAxis[0].min = Math.floor(res.min)
              // lineState.params.options.yAxis[0].name = [
              //   `${res.unit}\n\n\n\n`,
              //   ''
              // ]
              lineState.params.options.yAxis[0].name = ['', '']
              lineState.unit = res.unit ? `单位：${res.unit}` : ''
              lineState.params.options.dataset.source = res.data
              lineState.params.loading = false
            }
          })
          .catch(() => {
            console.log('请求失败')
          })
      }
    })

    const refreshData = () => {
      lineState.getData(props.goodsId)
    }
    watch(
      () => props.goodsId,
      (newVal) => {
        lineState.getData(newVal)
      }
    )
    return {
      lineState,
      refreshData
    }
  }
})
</script>
<style lang="less" scoped>
.box {
  height: 100%;
  padding: 7px 20px 7px 5px;
  .box-line {
    height: 100%;
  }
}
</style>
